<template>
	<view>
		<view class="fixe-nav">
			<view class="search-box">
				<u-search class="search" placeholder="请输入酒店名称" @custom="searchBtn" v-model="formData.jdName"
					shape="square" inputAlign="center"></u-search>
			</view>
			<view class="inv-h-w">
				<view :class="['inv-h',Inv==2?'inv-h-se':'']" @click="changeTab(2)">全部</view>
				<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="changeTab(1)">待入住
				</view>
				<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="changeTab(0)">待确定</view>
				<view :class="['inv-h',Inv==3?'inv-h-se':'']" @click="changeTab(3)">已取消
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="swiper-content">
			<view v-if="Inv==Inv" class="content style-default">
				<goods-order :tlist="dataList" :types="Inv" class="item"></goods-order>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		getOrderList
	} from '@/api/order.js'
	import goodsOrder from "components/order-state-filter/order-state-filter"
	// import store from '../../store'
	export default {
		components: {
			goodsOrder
		},
		data() {
			return {
				total: null, //总共多少条数据
				formData: {
					limit: 20, //每页20条数据
					page: 1, //第几页
					jdName: '', // 酒店名称
					orderStatusNumber: 2
				},
				totalPage: null,
				Inv: 2,
				dataList: [],
				listDet: [], // 待确定
				listCheck: [], // 待入住
				listCancel: [], // 已取消
				listTotal: 0,
				total1: 0,
				total2: 0,
				total3: 0,
				msg: 'webSocket',
				timer: '',
				// uid:''  //  用户id
			}
		},
		onShow() {
			// this.connectSocket()
			// 定时器
			this.timer = setInterval(() => {
				this.getList()
			}, 3000);
		},
		onLoad() {
			this.getList()
			// this.uid = store.state.app.uid
		},
		//上拉刷新
		onReachBottom() {
			// 当前页数
			let currentPage = this.formData.page
			// 总页数
			let totalPage = this.totalPage
			if (currentPage < totalPage) {
				//当前条数小于总条数 则增加请求页数
				this.formData.page++;
				this.getList() //调用加载数据方法
			} else {
				uni.showToast({
					title: "已加载全部数据",
					icon: "none"
				})
			}
		},
		onHide() {
			clearInterval(this.timer)
			// uni.closeSocket()
		},
		methods: {
			// connectSocket() {
			//   uni.connectSocket({
			//     url: 'ws://192.168.1.181:8083/websocket/'+ this.uid,
			//     success(data) {
			//       console.log('WebSocket连接成功！');
			//     }
			//   });
			//   uni.onSocketOpen(function(res) {
			//     console.log('WebSocket连接已打开！');
			//   });
			//      uni.onSocketMessage(function (res) {
			//        console.log('收到服务器内容：' + res.data);
			//        this.getList()
			//      });
			//   uni.onSocketError(function(res) {
			//     console.log('WebSocket连接打开失败，请检查！');
			//   });
			// },
			//  获取订单列表
			getList() {
				const params = {
					...this.formData
				}
				if (this.Inv == 2) {
					params.orderStatusNumber = ''
				} else {
					params.orderStatusNumber = this.Inv
				}
				getOrderList(params).then(res => {

					let dataList = res.data.list //接口列表数据
					this.dataList = dataList
					this.totalPage = res.data.totalPage
				})
			},
			searchBtn() {
				this.formData.page = 1
				const params = {
					jdName:this.formData.jdName
				}
				getOrderList(params).then(res => {
					let dataList = res.data.list //接口列表数据
					this.dataList = dataList
					this.totalPage = res.data.totalPage
				})
			},
			changeTab(Inv) {
				this.formData.page = 1
				this.Inv = Inv
				this.getList()

			}
		}
	}
</script>

<style lang="scss">
	.icon_searched {
		height: 100rpx;
		width: 100rpx;
	}

	.icon_unsearched {
		width: 0rpx;
		height: 0rpx;
	}

	.image_unsearched {
		width: 0rpx;
		height: 0rpx;
	}

	.image_searched {
		margin-top: 3rpx;
		line-height: 94rpx;
		margin-left: 35rpx;
		width: 94rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.icon_searched,
	.nickname_searched {
		float: left;
	}

	.nickname_searched {
		margin-left: 55rpx;
		line-height: 100rpx;
	}

	.nickname_unsearched {
		line-height: 100rpx;
		margin: 0 auto;
		text-align: center;
	}

	.fonticon_unsearched {
		height: 0rpx;
		width: 0rpx;
	}

	.icon-user-plus1,
	.icon-user,
	.icon-user-check {
		line-height: 110rpx;
		position: absolute;
		right: 35rpx;
		font-size: 40rpx;
	}

	.search {
		display: flex;
		margin-top: 30rpx;
		background-color: #fff;
	}

	.search-box {
		background-color: #e9e9e9;
		height: 100rpx;
		padding: 20rpx;
	}

	.fixe-nav {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 99;
		background-color: #e9e9e9;
	}

	.inv-h-w {
		background-color: #FFFFFF;
		height: 100upx;
		display: flex;
		margin: 10px 10px;
		border-radius: 10px;
	}

	.inv-h {
		font-size: 25upx;
		flex: 1;
		text-align: center;
		height: 100upx;
		line-height: 100upx;
	}

	.inv-h-se {
		color: #3055C8;
		font-weight: bold;
		border-bottom: 6rpx solid #3055C8;
	}

	//#ifdef H5
	.swiper-content {
		position: absolute;
		margin-top: 210rpx;

		.content {
			width: 750rpx;
			margin: 0 auto 60rpx;
		}
	}

	// #endif 
	// #ifdef  MP-WEIXIN
	.swiper-content {
		position: absolute;
		margin-top: 300rpx;

		.content {
			width: 750rpx;
			margin: 0 auto 60rpx;
		}

		// .content {
		//   width: 750rpx;
		//   margin: 0 auto 60rpx;
		// }
	}

	//#endif 
</style>